<template>
  <div class="box">
    <van-nav-bar title="设置" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <van-cell
      is-link
      title="绑定用户名"
      @click="showUsername"
      :value="username"
    ></van-cell>
    <van-popup v-model="show_username">
      <div class="bind_username">
        <h2>设置用户名</h2>
        <van-field v-model="username" placeholder="请输入用户名" clearable />
        <van-button
          type="Info"
          round
          block
          native-type="submit"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="bindUsername"
          >更新</van-button
        >
      </div>
    </van-popup>
    <van-cell is-link title="修改密码" @click="showUserpass"></van-cell>
    <van-popup v-model="show_userpass" class="updatePass">
      <h2>更新密码</h2>
      <van-field v-model="oldpass" placeholder="原始密码" clearable />
      <van-field v-model="newpass" placeholder="新密码" clearable />
      <van-button
        type="Info"
        round
        block
        native-type="submit"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="updatePass"
        >更新</van-button
      >
    </van-popup>
    <div style="margin: 50px 10px">
      <van-button
        type="Info"
        round
        block
        native-type="submit"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="quit"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "SetPage",
  data() {
    return {
      userid: "",
      username: "",
      token: "",
      oldpass: "",
      newpass: "",
      show_username: false,
      show_userpass: false,
    };
  },
  created() {
    this.username = sessionStorage.getItem("username");
    this.userid = sessionStorage.getItem("useid");
    this.token = sessionStorage.getItem("token");
  },
  methods: {
    quit() {
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("userid");
      this.$router.replace("/Mypage");
    },
    showUsername() {
      if (this.username) {
        Toast("用户名只能更改一次");
      } else {
        this.show_username = true;
      }
    },
    showUserpass() {
      this.show_userpass = true;
    },
    bindUsername() {
      this.$http({
        url: "user/bindusername",
        params: `userid=${sessionStorage.getItem("userid")}&username=${
          this.username
        }`,
      }).then((res) => {
        console.log(res.data);
      });
    },
    updatePass() {
      this.$http({
        url: "user/updatePassword",
        headers: {
          token: this.token,
        },
        params: {
          userid: sessionStorage.getItem("userid"),
          oldpassword: this.oldpass,
          newpassword: this.newpass,
        },
      }).then((res) => {
        if (res.data.code == "200") {
          Toast({
            message: "修改密码成功",
            duration:1000
          });
          this.show_userpass = false;
          sessionStorage.clear();
          setTimeout(() => {
            this.$router.replace("login");
          }, 1000);
        } else {
          Toast(res.data.message);
        }
      });
    },
  },
};
</script>

<style scoped>
.van-popup {
  height: 30%;
  width: 80%;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}
.bind_username h2 {
  text-align: center;
  flex: 1;
  font-size: 20px;
}
.van-cell {
  margin: 30px 0;
}
.updatePass {
  padding: 10px 10px;
}
.updatePass .van-cell {
  margin: 5px 0;
}
.updatePass h2 {
  text-align: center;
  flex: 1;
  font-size: 20px;
}
</style>